<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>微博</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <link href="style/weibo.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class="jyArea">

</div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector(".jyArea"));
    const TakeComment = ()=> (
        <div className="takeComment">
            <textarea name="textarea" className="takeTextField" id="tijiaoText"></textarea>
            <div className="takeSbmComment">
                <input type="button" className="inputs" value=""/>
            </div>
        </div>
    )
    const CommentOn = ()=> (
        <div className="commentOn">
            <div className="noContent">暂无留言</div>
            <div className="messList">
                <div className="reply">
                    <p className="replyContent">内容</p>
                    <p className="operation">
                        <span className="replyTime">2020.03.10 01:01:01</span>
                        <span className="handle">
                                <a href="#" className="top">0</a>
                                <a href="#" className="down_icon">9</a>
                                <a href="#" className="cut">删除</a>
                            </span>
                    </p>
                </div>
            </div>
            <div className="page">
                <a href="#" className="active">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
            </div>
        </div>
    )
    // 一般render接收的内容即是根组件
    const App = () => (
        <>
            <TakeComment/>
            <CommentOn/>
        </>
    )
    root.render(<App/>)
</script>
</html>
